<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点云图像融合可视化系统</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
    <div class="container">
        <!-- 头部标题 -->
        <header class="header">
            <h1>点云图像融合可视化系统</h1>
            <p>基于KITTI数据集的3D点云与图像融合处理平台</p>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 左侧控制面板 -->
            <aside class="control-panel">
                <div class="panel-section">
                    <h3>文件上传</h3>
                    
                    <!-- 点云文件上传 -->
                    <div class="upload-section">
                        <label for="pointcloud-upload" class="upload-label">
                            <div class="upload-area" id="pointcloud-area">
                                <div class="upload-icon">📊</div>
                                <div class="upload-text">
                                    <strong>点云文件 (.bin)</strong>
                                    <span>拖拽文件到此处或点击选择</span>
                                </div>
                            </div>
                        </label>
                        <input type="file" id="pointcloud-upload" accept=".bin" hidden>
                        <div class="file-status" id="pointcloud-status">未选择文件</div>
                    </div>

                    <!-- 图像文件上传 -->
                    <div class="upload-section">
                        <label for="image-upload" class="upload-label">
                            <div class="upload-area" id="image-area">
                                <div class="upload-icon">🖼️</div>
                                <div class="upload-text">
                                    <strong>图像文件 (.png/.jpg)</strong>
                                    <span>拖拽文件到此处或点击选择</span>
                                </div>
                            </div>
                        </label>
                        <input type="file" id="image-upload" accept=".png,.jpg,.jpeg" hidden>
                        <div class="file-status" id="image-status">未选择文件</div>
                    </div>

                    <!-- 标定文件上传 -->
                    <div class="upload-section">
                        <label for="calib-upload" class="upload-label">
                            <div class="upload-area" id="calib-area">
                                <div class="upload-icon">📐</div>
                                <div class="upload-text">
                                    <strong>标定文件 (.txt)</strong>
                                    <span>拖拽文件到此处或点击选择</span>
                                </div>
                            </div>
                        </label>
                        <input type="file" id="calib-upload" accept=".txt" hidden>
                        <div class="file-status" id="calib-status">未选择文件</div>
                    </div>

                    <!-- 处理按钮 -->
                    <button id="process-btn" class="process-button" disabled>
                        开始融合处理
                    </button>
                </div>
            </aside>

            <!-- 右侧可视化区域 -->
            <section class="visualization-area">
                <!-- 3D渲染容器 -->
                <div class="render-container">
                    <div id="three-container" class="three-container">
                        <div class="loading-overlay" id="loading-overlay">
                            <div class="loading-spinner"></div>
                            <div class="loading-text">正在加载...</div>
                        </div>
                    </div>
                </div>

                <!-- 图像显示容器 -->
                <div class="image-container" id="image-container" style="display: none;">
                    <img id="display-image" alt="原始图像">
                    <div class="image-info">
                        <span id="image-info-text">图像信息</span>
                    </div>
                </div>

                <!-- 下方三列布局 -->
                <div class="bottom-panels">
                    <!-- 导出选项 -->
                    <div class="bottom-panel">
                        <h4>导出选项</h4>
                        <div class="export-options-compact">
                            <div class="toggle-container">
                                <label class="toggle-label-compact">
                                    <span class="toggle-text">包含强度信息</span>
                                    <div class="toggle-switch">
                                        <input type="checkbox" id="include-intensity" checked>
                                        <span class="toggle-slider"></span>
                                    </div>
                                </label>
                            </div>
                            <label for="export-format" class="label-compact">导出格式:</label>
                            <select id="export-format" class="format-select">
                                <option value="ply">PLY格式</option>
                                <option value="pcd">PCD格式</option>
                                <option value="xyz">XYZ格式</option>
                                <option value="txt">TXT格式</option>
                            </select>
                            <label for="export-filename" class="label-compact">文件名:</label>
                            <input type="text" id="export-filename" class="filename-input"
                                   placeholder="colored_pointcloud" value="colored_pointcloud">
                            <button id="export-btn" class="export-button-compact" disabled>
                                💾 导出
                            </button>
                        </div>
                    </div>

                    <!-- 可视化控制 -->
                    <div class="bottom-panel">
                        <h4>可视化控制</h4>
                        <div class="view-controls-bottom">
                            <button class="view-btn-bottom active" data-view="original-pointcloud">原始点云</button>
                            <button class="view-btn-bottom" data-view="fov-original-pointcloud">图像范围</button>
                            <button class="view-btn-bottom" data-view="colored-pointcloud">彩色点云</button>
                            <button class="view-btn-bottom" data-view="image">原始图像</button>
                        </div>
                        <div class="render-settings-compact">
                            <label for="point-size" class="label-compact">点大小:</label>
                            <div class="slider-container">
                                <input type="range" id="point-size" min="0.1" max="2" step="0.1" value="0.5">
                                <span id="point-size-value">0.5</span>
                            </div>
                        </div>
                    </div>

                    <!-- 处理状态 -->
                    <div class="bottom-panel">
                        <h4>处理状态</h4>
                        <div class="status-display-bottom">
                            <div class="status-item-bottom">
                                <span class="status-label-bottom">文件状态:</span>
                                <span class="status-value-bottom" id="files-status">等待上传</span>
                            </div>
                            <div class="status-item-bottom">
                                <span class="status-label-bottom">融合前:</span>
                                <span class="status-value-bottom" id="original-points-count">-</span>
                            </div>
                            <div class="status-item-bottom">
                                <span class="status-label-bottom">融合后:</span>
                                <span class="status-value-bottom" id="colored-points-count">-</span>
                            </div>
                            <div class="status-item-bottom">
                                <span class="status-label-bottom">成功率:</span>
                                <span class="status-value-bottom" id="projection-rate">-</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>

        <!-- 底部信息 -->
        <footer class="footer">
            <p>点云图像融合可视化系统 | 支持KITTI数据集格式 | 基于Three.js 3D渲染</p>
        </footer>
    </div>

    <!-- 模态对话框 -->
    <div class="modal" id="error-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>错误提示</h3>
                <button class="modal-close" id="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <p id="error-message">发生了未知错误</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" id="modal-ok">确定</button>
            </div>
        </div>
    </div>

    <script src="app.js?v=19"></script>
</body>
</html>
